<template>
  <div v-loading='loading'>
    <Ttitle class="title" @commit='commit' @NowTime='NowTime' :isJJ='isjiaojuan' :isdisabled='disabled' @commitPage='commitPage' @timeCommit='timeCommit'></Ttitle>
    <div style="height:50px;"></div>
    <div class="big_box">
    <div class="big_box_left">
        <div style="height:calc(100% - 50px);overflow: auto;">
            <div v-for="(ti,index) in TiType" :key="index+1000000">
                <div style="padding:0 24px; display:flex;" v-if="ti.length!=0">
                    <span class="TI_title">{{ti[0].sum}}、{{ti[0].qtype}}题
                        <span>（共{{getExectSettingData.试题分布[ti[0].qtype].数量}}题，每题{{getExectSettingData.试题分布[ti[0].qtype].分数}}分，说明：{{ti[0].qtype!="多选"?'选择一项正确答案':'选择所有正确的答案'}}）</span>
                    </span>
                   
                </div>
                <div class="TI_number">
                    <el-row>
                        <el-col :span="4" v-for="item in ti" :key="item.tixu">
                            <div class="TIClass" @click="changeTi(item)" :style="item.type">
                                {{item.tixu}}
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </div>
         <!-- <div style="height:80px;width:100%">
         </div> -->
        <div class="Ti_foot" v-if='!disabled'>
            <div class="tICade">
                <div class="TIClass" style='background:#eee'></div>
                <span>未答题</span>
            </div>
            <div class="tICade">
                <div class="TIClass" style='background:#F5A623'></div>
                <span>已答题</span>
            </div>
            <div class="tICade">
                <div class="TIClass" style='background:#175DFF'></div>
                <span>当前题</span>
            </div>
        </div>
        <div class="Ti_foot" v-else>
            <div class="tICade">
                <div class="TIClass" style='background:#eee'></div>
                <span>未答题</span>
            </div>
            <div class="tICade">
                <div class="TIClass" style='background:#7ED321'></div>
                <span>正确题</span>
            </div>
            <div class="tICade">
                <div class="TIClass" style='background:#F33E34'></div>
                <span>错误题</span>
            </div>
        </div>
    </div>
    <div class="big_box_right">
        <div class="Ti_title">
            <span>{{Current.qtype}}题</span>
        </div>
        <div class="Ti_content">   
            <div class="Ti_Gan">
                <span style="display:inline-block;width:98%;">{{Current.name}}、{{Current.stem}}</span>  
                <div style="display: inline-block" v-if="Current.stem_img">
                    <el-image
                        style="width: 60%"
                        :src="Current.stem_img"
                        :preview-src-list="[Current.stem_img]"
                    >
                    </el-image>
                </div>
            </div>
            <div>
                <el-radio-group v-model="daan" class="radio-group-box" @change="danChange(Current)" v-if="Current.qtype=='单选'" :disabled="disabled">
                    <div class="radio_box" v-for="(item,index) in Current.tiList" :key="index">
                        <el-radio class="arrse" :label="item.cred" v-if='item.content_img'>{{item.cred}} <img
                            style="max-width: 100px; max-height: 100px"
                            :src="item.content_img"
                            alt=""
                        /></el-radio>
                        <el-radio class="arrse" :label="item.cred" v-else-if='item.content'>{{item.cred}} {{item.content}}</el-radio>
                    </div>
                </el-radio-group> 
                <el-checkbox-group class="radio-group-box" v-if="Current.qtype=='多选'" v-model="checkList" @change="danChange(Current)" :disabled="disabled">
                    <div class="radio_box" v-for="(item,index) in Current.tiList" :key="index">
                        <el-checkbox :label="item.cred" v-if="item.content_img != ''">
                            <span class="arrse"
                                >{{ item.cred }}
                                <img
                                style="max-width: 100px; max-height: 100px"
                                :src="item.content_img"
                                alt=""
                            /></span>
                            </el-checkbox>
                            <el-checkbox :label="item.cred" v-else-if="item.content">
                            <span class="arrse"
                                >{{ item.cred }} {{ item.content }}</span
                            ></el-checkbox
                            >
                    </div>
                </el-checkbox-group>
                <el-radio-group v-model="daan" class="radio-group-box" @change="danChange(Current)" v-if="Current.qtype=='判断'" :disabled="disabled">
                    <div class="radio_box">
                        <el-radio class="arrse" label="正确">正确</el-radio>
                    </div>
                    <div class="radio_box">
                        <el-radio class="arrse" label="错误">错误</el-radio>
                    </div>
                </el-radio-group>
            </div>
            <div style="margin-top:44px;padding:0 8px;">
                <el-button @click="changeClick('del')" style="margin-right:30px;" type="primary" :disabled='updisabled'>上一题</el-button>
                <el-button @click="changeClick('add')" style="margin-right:60px;" type="primary" :disabled='downdisabled'>下一题</el-button>
                <!-- <el-button type="warning" @click="goback">退出练习</el-button> -->
                <el-button type="primary" @click="commit" v-if='!disabled' style="margin-left:30%;">交卷</el-button>
                <el-button type="primary" @click="goback" v-else style="margin-left:30%;">退出</el-button>
            </div>
            <div class="daan_box" v-if="isDaAn">
                <span>
                    答案:{{Current.answer}}
                </span>
                <p v-if='Current.analysis'>
                    解析:{{Current.analysis}}
                </p>
            </div>
        </div>
    </div> 
  </div>
    <el-dialog
        title="我的成绩"
        :visible="dialogVisible"
        width="30%"
        :show-close='false'
        >
        <div class="chengji">
            <el-progress type="circle" :percentage="fraction" :stroke-width='12' :format='text_progress' :width='150' :color='customColorMethod'>
            </el-progress>
            <div class='textStyle'>
                <span :style="{color:textColor}">{{fraction}}</span>
                <p>考试得分</p>
            </div>
        </div>
        <ul class="ulbox">
            <li>
                <span style="color:#65BB06;">{{correct}}</span>
                <p>正确题数</p>
            </li>
            <li>
                <span style="color:#D0021B;">{{error}}</span>
                <p>错误题数</p>
            </li>
            <li>
                <span style="color:#666;">{{Unanswered}}</span>
                <p>未做题数</p>
            </li>
        </ul>
        <span slot="footer" class="dialog-footer">
            <el-button @click="errorlist">查看错题</el-button>
            <el-button @click="rewinding">复卷</el-button>
            <el-button type="primary" @click="goback">回到主页</el-button>
        </span>
    </el-dialog>

  </div>
</template>

<script>
import Ttitle from './title.vue'
import {quizDone,mockcancelcollect,mockcollect,resetwrongAdd}from'@/api/admin.js'
import {getTi,delTi,getExectSetting}from'@/utils/auth.js'
export default {
    data() {
        return {
            titleName:this.$route.query.titleName, //模拟考试 or 正式考试
            //#175DFF  当前
            Tistyle:{
                background:'#eee',
                color:'#000'
            },//未答题样式
            DQTistyle:{
                background:'#175DFF',
                color:'#FFF'
            },//当前题样式
            YDTistyle:{
                background:'#F5A623',
                color:'#FFF'
            },//已答题题样式
            DCTistyle:{
                background:'#F33E34',
                color:'#FFF'
            },//答错题样式
            DDTistyle:{
                background:'#7ED321',
                color:'#FFF'
            },//答对题样式
            DQTI:{},//当前题信息
            TIXU:1,//题序
            daan:'',//答题  单选
            Current:{   //当前题展示在页面
                name:'1',
                stem:'',
                tiList:[],
                answer:'',
                analysis:'',
                id:'',
                qtype:'',
            },
            updisabled:true,  //上一题 禁用标识
            downdisabled:false, //下一题禁用标识
            commitData:[],//用户答案  提交时传给后台
            isDaAn:false,//是否显示答案  默认不显示 在答题后显示
            Ti:getTi(),//所有试题
            quizid:this.$route.query.quizid,//试卷id  唯一
            gz:this.$route.query.gz,
            checkList:[],//多选的vuelue
            isYes:false,//默认不收藏
            Collectionlist:[],//收藏得全部试题
            subjectid:this.$route.query.subjectid,//专业id
            DXTi:[],//单选题
            MOTi:[],//单选题
            PDTi:[],//判断题
            TiType:[],//试题题型 单选题  单选题  判断题
            getExectSettingData:JSON.parse(getExectSetting()),//取出考试配置
            dialogVisible:false,//隐藏弹出框
            textColor:'#1677FF',//进度条 文字颜色
            correct:0,//正确题数
            error:0,//错误题数
            Unanswered:0,//未答题数
            fraction:0,//最终得分
            loading:false,//等待
            isjiaojuan:true,//如果已经交卷  则为fales
            disabled:false,//复卷时禁用答题按钮
            time:0,//当前时间
        }
    },
    components:{
        Ttitle
    },
    // watch:{
    //     TIXU(val){
    //         this.styleChange(val)
    //     } 
    // },
    computed:{
        qtype:function(){
            return this.Ti[0].qtype
        }
    },
    created() {
            this.isDaAn = this.$route.query.daan=='显示' //显示答案
            this.Ti.map((item,index)=>{
                item.name = index+1 //加入题序
                if(item.uanswer){
                    this.commitData.push({questionid:item.id,uanswer:item.uanswer,scored:item.answer==item.uanswer})
                    this.TIXU=item.name
                }
                if(item.qtype=='单选'){
                    this.DXTi.push(item)
                }
                if(item.qtype=='多选'){
                    this.MOTi.push(item)
                }
                if(item.qtype=='判断'){
                    this.PDTi.push(item)
                }
            })
            let A = true
            let B = true
            let C = true
            if(this.DXTi.length!=0){
                this.DXTi.map((item,index)=>{item.tixu = index+1})
            }else{
                A=false
            }
            if(this.MOTi.length!=0){
                this.MOTi.map((item,index)=>{item.tixu = index+1})
            }else{
                B=false
            }
            if(this.PDTi.length!=0){
                this.PDTi.map((item,index)=>{item.tixu = index+1})
            }else{
                C=false
            }
            this.TiType.push(this.DXTi,this.MOTi,this.PDTi)
            let sum=1
            this.TiType.map((item)=>{
                if(item.length!=0){
                    item[0].sum=sum++
                }
            })
            if(A){
                this.DQTI = this.TiType[0][0]
            }else if(B){
                this.DQTI = this.TiType[1][0]
            }else if(C){
                this.DQTI = this.TiType[2][0]
            }
            this.Current.qtype=this.DQTI.qtype
            this.styleChange(this.DQTI.tixu)
            document.addEventListener('keydown',this.returnF5Code)
            if(this.gz=='fj'){
                this.rewinding()
            }
    },
    methods: {
        //样式切换
        styleChange(val){
            this.styleMap()
            if(this.Current.qtype=='单选'){
                this.DXTi.map(item=>{
                    // item.type=this.Tistyle
                    if(Number(item.tixu)==val){
                        item.type=this.DQTistyle
                        this.DQTI=item
                        this.funChangeTi(item)
                    }
                })
            }
            if(this.Current.qtype=='多选'){
                this.MOTi.map(item=>{
                    if(Number(item.tixu)==val){
                        item.type=this.DQTistyle
                        this.DQTI=item
                        this.funChangeTi(item)
                    }
                })
            }
            if(this.Current.qtype=='判断'){
                this.PDTi.map(item=>{
                    if(Number(item.tixu)==val){
                        item.type=this.DQTistyle
                        this.DQTI=item
                        this.funChangeTi(item)
                    }
                })
            }
        },
        //默认样式改变
        styleMap(){
            this.Ti.map(item=>{
                item.type=this.Tistyle
                this.commitData.map(element=>{
                    if(item.id==element.questionid){
                        if(!this.disabled){
                            item.type=this.YDTistyle
                        }else{
                            if(item.id==element.questionid){
                                if(Boolean(element.scored)){
                                    item.type=this.DDTistyle
                                }else{
                                    item.type=this.DCTistyle
                                }
                            }else{
                                item.type=this.DQTistyle
                            }
                        }
                    }
                })
            })
        },
        //点击题号切换试题
        changeTi(item){
            this.Current.qtype=item.qtype
            this.DQTI =item
            this.TIXU =item.tixu
            this.styleChange(item.tixu)
            this.funChangeTi(item)
            this.changeClick()
            this.$forceUpdate()
        },
        //按钮切换试题
        changeClick(data){
            this.updisabled=false
            this.downdisabled=false
            
            if(!this.downdisabled&&data=='add'){
                this.TIXU = Number(this.DQTI.tixu)+1
            }
            if(!this.updisabled&&data=='del'){
                this.TIXU = Number(this.DQTI.tixu)-1
            }
            if(this.Current.qtype=='单选'&&this.DXTi.length==Number(this.TIXU)){
                this.downdisabled=true
            }
            if(this.Current.qtype=='多选'&&this.MOTi.length==Number(this.TIXU)){
                this.downdisabled=true
            }
            if(this.Current.qtype=='判断'&&this.PDTi.length==Number(this.TIXU)){
                this.downdisabled=true
            }
            if(Number(this.TIXU)==1){
                this.updisabled=true
            }
            this.styleChange(this.TIXU)
            this.$forceUpdate()
        },
        //试题信息  切换试题时  触发此函数
        funChangeTi(item){
            let Arr=[]
            Arr.push({
                cred:'A',
                content:item.a,
                content_img:item.a_img,
            },{
                cred:'B',
                content:item.b,
                content_img:item.b_img,
            },{
                cred:'C',
                content:item.c,
                content_img:item.c_img,
            },{
                cred:'D',
                content:item.d,
                content_img:item.d_img,
            },{
                cred:'E',
                content:item.e,
                content_img:item.e_img,
            },{
                cred:'F',
                content:item.f,
                content_img:item.f_img,
            })
            this.Current={
                name:item.tixu,
                stem:item.stem,
                tiList:Arr,
                answer:item.answer,
                analysis:item.analysis,
                id:item.id,
                stem_img: item.stem_img,
                qtype:item.qtype
            }
            //每次切换试题都要重新填写用户相对应的答案
            this.daan=''
            this.checkList=[]
            // this.isDaAn=false
            this.commitData.map(ite=>{
                if(ite.questionid==item.id){
                    this.daan=ite.uanswer
                    this.checkList=ite.uanswer.split('')
                    // this.isDaAn=true
                }
            })
            this.isYes=false         
            this.Collectionlist.map(itemA=>{
                if(itemA.questionid==item.id){
                    this.isYes=true
                }
            })
        },
        NowTime(data){
            this.time = data
        },
        //退出
        goback(){
            this.$router.go(-1)          
        },
        //答题时 单选
        danChange(data){
            if(data.qtype=='多选'){
                this.daan=this.checkList.sort().join('')
            }
            let scored  //是否正确   对 1 错 0
            if(data.answer==this.daan){
                scored=1
            }else{
                scored=0
            }
            var isyes=false
            this.commitData.map(item=>{
                if(this.commitData.length==0||item.questionid==data.id){
                    isyes=true
                    item.uanswer=this.daan
                    item.scored=scored
                }
            })
            if(!isyes){
                this.commitData.push({questionid:data.id,uanswer:this.daan,scored})
                // this.isDaAn = true
            }
        },
        //阻止按键刷新
        returnF5Code(e){
            var evt = window.event || e;
            var code = evt.keyCode || evt.which;
            if (code>111&&code<123) {
                if (evt.preventDefault) {
                    evt.preventDefault();
                } else {
                    evt.keyCode = 0;
                    evt.returnValue = false
                }
            }
        },
        //交卷函数
        jjFunction(data){
            let obj = {
                quizid:this.quizid,
                gz:this.gz
            }
            this.correct=0 
            this.error=0
            let Dfen = 0 //单选做对题数
            let Pfen = 0//判断做对题数
            let Mfen = 0//多选做对题数
            this.commitData.map(item=>{
                if(Boolean(item.scored)){
                    this.correct++
                    if(item.uanswer=='正确'||item.uanswer=='错误'){
                        Pfen++  
                    }else if(item.uanswer.length>1){
                        Mfen++
                    }else{
                        Dfen++
                    }
                }else{
                    this.error++
                }
            })
            let Dfens = 0
            let Mfens = 0
            let Pfens = 0
            Dfens=Dfen*this.getExectSettingData.试题分布.单选.分数   //单选得分
            Mfens=Mfen*this.getExectSettingData.试题分布.多选.分数   //多选得分
            Pfens=Pfen*this.getExectSettingData.试题分布.判断.分数   //判断得分
            this.fraction=Dfens+Mfens+Pfens   //总分
            this.Unanswered=this.Ti.length-this.commitData.length  //未作题
            this.$forceUpdate()
            if(this.commitData.length>0){
                this.loading=true
                quizDone(obj,{quizlog:JSON.stringify(this.commitData),use_time:data}).then(res=>{
                    this.loading=false
                    if(res.code==200){
                        this.isjiaojuan=false
                        this.dialogVisible=true
                    }
                })
            }else{
                this.isjiaojuan=false
                this.dialogVisible=true 
            }
        },
        //commit 答题记录
        commit(){
            this.$confirm('确定交卷？','提示',{
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
              showClose:false,
            }).then(()=>{
                this.jjFunction(this.time)
            }).catch(()=>{})
            
        },
        //退出当前页面 提交答题记录
        commitPage(data){
            if(this.commitData.length>0){
                let obj = {
                    quizid:this.quizid,
                    gz:this.gz
                }
                quizDone(obj,{quizlog:JSON.stringify(this.commitData),use_time:data}).then(res=>{
                })
            }
        },
        //时间到  提交答题记录
        timeCommit(data){
            this.$message.success('时间到，将自动提交试卷')
            this.jjFunction(data)
        },
        //收藏 取消收藏
        CollectionClick(data){
            var isyes=false
            this.Collectionlist.map((item,index)=>{
                if(this.Collectionlist.length==0||item.questionid==data.id){
                    isyes=true
                    delete this.Collectionlist[index]
                    mockcancelcollect({subjectid:this.subjectid,questionid:data.id}).then(res=>{
                        if(res.code==200){
                            this.$message.success('取消成功')
                        }else{
                            this.$$message.error(res.msg)
                        }
                    })
                }
            })
            if(!isyes){
                this.Collectionlist.push({questionid:data.id,isYes:true})
                mockcollect({subjectid:this.subjectid,questionid:data.id}).then(res=>{
                    if(res.code==200){
                        this.$message.success('收藏成功')
                    }else{
                        this.$$message.error(res.msg)
                    }
                })
            }
        },
        //收藏控制器
        CollectionBoxClick(){
            this.isYes=!this.isYes
        },
        //环形进度条 内置文字
        text_progress(percentage){
        },
        //环形进度条 颜色调整
        customColorMethod(percentage) {
            if (percentage <= 50) {
                this.textColor='#f56c6c'
                return '#f56c6c';
            } else if (percentage <= 80) {
                this.textColor='#e6a23c'
                return '#e6a23c';
            } else {
                this.textColor='#409eff'
                return '#409eff';
            }
        },
        //复卷
        rewinding(){
            this.dialogVisible=false
            this.disabled=true
            this.isDaAn=true
            this.isjiaojuan=false
            this.styleChange(this.TiType[0][0].tixu)
        },
        //查看错题
        errorlist(){
            if(this.commitData.length==0){
                return this.$message.error('没有错题')
            }
            
            let DXTi=[]
            let MOTi=[]
            let PDTi=[]
            this.commitData.filter(item=>{
                return !Boolean(item.scored)
            }).map((item,index)=>{
                this.Ti.map(it=>{
                    if(it.id == item.questionid){
                        // it.tixu = index+1 //加入题序
                        if(it.qtype=='单选'){
                            DXTi.push(it)
                        }
                        if(it.qtype=='多选'){
                            MOTi.push(it)
                        }
                        if(it.qtype=='判断'){
                            PDTi.push(it)
                        }
                    }
                })
            })
            let A = true
            let B = true
            let C = true
            if(DXTi.length!=0){
                DXTi.map((item,index)=>{item.tixu = index+1})
            }else{
                A=false
            }
            if(MOTi.length!=0){
                MOTi.map((item,index)=>{item.tixu = index+1})
            }else{
                B=false
            }
            if(PDTi.length!=0){
                PDTi.map((item,index)=>{item.tixu = index+1})
            }else{
                C=false
            }
            if(PDTi.length == 0&&MOTi.length == 0&&DXTi.length == 0){
                return this.$message.error('没有错题')
            }
            this.DXTi=DXTi
            this.MOTi=MOTi
            this.PDTi=PDTi
            this.TiType=[]
            this.TiType.push(this.DXTi,this.MOTi,this.PDTi)
            let sum=1
            this.TiType.map((item)=>{
                if(item.length!=0){
                    item[0].sum=sum++
                }
            })
            this.dialogVisible=false
            this.disabled=true
            this.isDaAn=true
            this.isjiaojuan=false
            // this.styleMap()
            if(A){
                this.styleChange(this.TiType[0][0].tixu)
            }else if(B){
                this.styleChange(this.TiType[1][0].tixu)
            }else if(C){
                this.styleChange(this.TiType[2][0].tixu)
            }
        }
    },
    beforeDestroy() {
        // this.commit(this.commitData)
        document.removeEventListener('keydown',this.returnF5Code)
        
    },
}
</script>

<style lang="scss" scoped>
.big_box {
  width: 100%;
  height: calc(100vh - 50px);
  min-height: 680px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f4f5f8;
  padding: 24px;
  // margin-top:50px;
  .big_box_left {
    width: 370px;
    height: 100%;
    background: #fff;
    padding: 24px 0;
    position: relative;
    // overflow: auto;
    .TI_title {
      font-weight: 600;
      display: inline-block;
      // width: 50px;
      span {
        font-weight: 400;
      }
    }
    .Ti_foot {
      position: absolute;
      bottom: 0;
      height: 80px;
      width: 100%;
      padding: 0 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .tICade {
        display: flex;
        align-items: center;
      }
      .TIClass {
        width: 24px;
        height: 24px;
        margin-right: 4px;
      }
    }
  }
  .big_box_right {
    flex: 1;
    height: 100%;
    background: #fff;
    margin-left: 24px;
    .Ti_title {
      width: 100%;
      display: flex;
      justify-content: center;
      span {
        display: flex;
        padding: 24px;
        font-size: 16px;
        font-weight: 600;
      }
    }
    .Ti_content {
      // width: 100%;
      padding: 0 50px;
      font-size: 26px;
      .Ti_Gan {
        margin-bottom: 32px;
        position: relative;
        .Collection {
          position: absolute;
          top: 0;
          right: 0;
          cursor: pointer;
          .el-icon-star-on:before {
            color: #f5a623;
          }
        }
      }
      .radio-group-box {
        padding: 0 20px;
      }
      .radio_box {
        font-size: 20px;
        padding-bottom: 16px;
        ::v-deep {
          .arrse {
            width: 65vw;
            .el-radio__label,
            .el-checkbox__label {
              font-size: 20px;
              word-break: break-all !important;
              white-space: normal !important;
            }
          }

          .el-radio__inner {
            width: 20px;
            height: 20px;
            &::after {
              width: 8px;
              height: 8px;
            }
          }
          .el-checkbox__inner {
            width: 20px;
            height: 20px;
            &::after {
              width: 5px;
              height: 9px;
              left: 6px;
            }
          }
          .el-radio__input {
            margin-top: -5px;
          }
        }
      }
      .daan_box {
        margin-top: 50px;
        padding: 20px 36px;
        background: #eeeeee;
        span {
          font-size: 18px;
        }
        p {
          margin: 0;
          font-size: 18px;
        }
      }
    }
  }
}
.button_color {
  background: #eee;
  // color:#fff;
}
.TI_number {
  padding: 0 24px;
  padding-top: 10px;
  // overflow: hidden;
  // max-height:calc(100% - 100px);
  .TIClass {
    width: 40px;
    height: 40px;
    background: #eee;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 14px;
    cursor: pointer;
  }
}
::v-deep {
  :root {
    min-height: 680px;
  }
  .el-radio__input.is-disabled + span.el-radio__label {
    color: #333;
  }
  .el-radio__input.is-disabled .el-radio__inner {
    border-color: #dcdfe6;
    background-color: #ffffff;
    &::after {
      background-color: #ffffff;
    }
  }
  .el-radio__input.is-disabled.is-checked .el-radio__inner {
    background-color: #1890ff;
    border-color: #1890ff;
  }
}
.chengji {
  width: 100%;
  display: flex;
  justify-content: center;
  position: relative;
  .textStyle {
    height: 150px;
    width: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    span {
      color: #1677ff;
      font-size: 36px;
    }
    p {
      color: #999999;
      font-size: 14px;
    }
  }
}
.ulbox {
  padding: 30px 57px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eee;
  li {
    text-align: center;
    line-height: 34px;
    span {
      font-size: 18px;
    }
    p {
      font-size: 18px;
      color: #999;
    }
  }
}
</style>